<template>
  <div class="newsList" v-show="isShow" >
       <div class="listBox">
           <ul class="list_content">  
       	   	  <li class="list" v-for="(item,index) in listArr" :key="'time' + index"  @click="intoNewInfo(item.id)">      
       	   	  	 <div class="imgBox">   
       	   	  	 	<img v-bind:src="item.cover">
       	   	  	 </div>
       	   	  	 <div class="contentInfo">
       	   	  	 	 <p class="title">{{item.title}}</p>
       	   	  	 	 <span>{{item.introduction}}</span>
       	   	  	 	 <p class="time">{{item.updated_at}}</p>
       	   	  	 </div>
       	   	  </li>
       	   </ul>
       </div>
       <div class="bottomBox">
	       <div class="buttonBox">
	       	   	<div class="prev" @click="bottomList(previous,1)"></div>
	       	   	<div class="bottomList">
	       	   		<span v-for="index in total_pages" class="bottomList_span"><a class="normal" :key="index" v-bind:class="[{active:index==current_page}]" @click="bottomList(index,0)">{{index}}</a></span>
	       	   	</div>
			        <div class="next" @click="bottomList(next,1)"></div> 
	       </div>       	
       </div>
  </div>
</template>

<script>
export default {
  name: "newsList",
  data () {
    return {
        name:'我要测试首页',
        listArr:[],
        total_pages:0,
        current_page:'',
        previous:'',
        next:'',
        isShow:false
    }
  },
  watch: {
    total_pages: function() {
        this.$nextTick(function(){
            var length = $('.bottomList span').length;
            console.log($('.bottomList').width());
            var w = ($('.bottomList').width())/this.total_pages;
            $('.bottomList span').css('width',w+'px');
        })
    }
  },
  methods: {
      intoNewInfo(brand_id){
          this.$router.push({
             path: '/newView',
             query: {
                 id: brand_id
             }
          })        
      },
      dataRender () {
        this.$loading(this.$t("contact.loading"));
         let self = this;
        axios.get('/api/news?is_push=0&page=0')
            .then(function (response) {
               if(response.data.data == undefined || response.data.data.length <= 0 ){
                   self.isShow = false;
               }else{
                   self.isShow = true;             
                   self.listArr = response.data.data;
                   self.total_pages = response.data.meta.pagination.total_pages;
                   self.current_page = response.data.meta.pagination.current_page;
                   self.previous = response.data.meta.pagination.links.previous;
                   self.next = response.data.meta.pagination.links.next;
               }
               self.closeLoading();

            })
            .catch(function (error) {
                console.log(JSON.stringify(error));
            })          
      },
      bottomList(index,status){
          // this.$options.methods.dataRender(index);
           console.log(index);
           if(status==0){
              this.$loading(this.$t("contact.loading"));
              var url = '/api/news?is_push=0&page='+index;
           }else{
              if(index!=null&&index!=""&&index!=undefined){
                 this.$loading(this.$t("contact.loading"));
                 var url = index;
              }else{
                 return;
              }
           }
           const self=this;
           axios.get(url)
            .then(function (response) {
               //console.log(JSON.stringify(response.data));
               self.closeLoading();
               self.listArr = response.data.data;
               self.total_pages = response.data.meta.pagination.total_pages;
               self.current_page = response.data.meta.pagination.current_page;
               self.previous = response.data.meta.pagination.links.previous;
               self.next = response.data.meta.pagination.links.next;
            })
            .catch(function (error) {
                console.log(JSON.stringify(error));
            }) 
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function () {
    this.dataRender(0);
  }
};
</script>

<style scoped>
   @import "../assets/css/newsList.css";
</style>
